<template>
  <div id="pie-container">
    <el-dialog title="切换区域" :visible.sync="open" width="500px" append-to-body
               @close="cancel">
      <el-form ref="form" label-width="60px" style="height: 120px;">
        <el-form-item label="县区">
          <el-select
            clearable
            v-model="city"
            placeholder="请选择"
            size="small"
            style="width: 100%;"
          >
            <el-option
              v-for="item in this.cityData"
              :key="item.deptCode"
              :label="item.deptName"
              :value="item.deptCode">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>

    <div class="d-flex pt-2 pl-2">
      <span style="color:#5cd9e8">
        <!-- <icon name="chart-bar"></icon> -->
      </span>
      <div class="d-flex">
        <span class="fs-xl text mx-2">附着物统计图</span>
        <dv-decoration-6 style="width:1.25rem;height:.25rem; position:relative;top:-.0375rem;"/>
       <!-- <el-tooltip v-show="isShow" class="item" effect="dark" content="点击切换区域" placement="left-start">
          <svg-icon @click="chooseArea()" class="svg" icon-class="areaNew"
                    style="width: 30px;height: 30px;margin-left: 178px;color: #5f74d4;margin-top: -12px;}"/>
        </el-tooltip>-->
      </div>
    </div>
    <div class="pie1" ref="pie1"></div>
  </div>
</template>

<script>
import {getInfo} from "@/api/login";
import {childlistUse} from "@/api/system/dept";

export default {
  name: 'pie1',
  props: {
    fzwdata: {
      type: Array,
      default: function () {
        return [];
      }
    },
    fatherMethod: {
      type: Function,
      default: null
    }
  },
  data() {
    return {
      city: '',
      isShow: false,
      open: false,
      cityData: [],
    }
  },
  /*watch() {
    fzwdata:Array
  },*/
  mounted() {
    this.$nextTick(() => {
      this.init()
    })
  },
  created() {
    getInfo().then(response => {
      let deptCode = response.user.dept.deptCode;
      if (deptCode.length == 4) {//新区
        childlistUse(deptCode).then(response => {
          this.cityData = response.data;
        });
        this.isShow = true;
      } else {
        this.isShow = false;
      }
    });
  },
  methods: {
    chooseArea() {
      this.open = true;
    },
    submit() {
      this.fatherMethod(this.city);
      this.open = false;
    },
    cancel() {
      this.open = false;
    },
    init() {
      let pie1 = this.$echarts.init(this.$refs.pie1);
      /*let scaleData = [
         /!* { 'name': '藕田', 'value': 19 },
          { 'name': '荷花', 'value': 24 },
          { 'name': '睡莲', 'value': 15 },
          { 'name': '其他', 'value': 10 }*!/

        ];
      this.fzwdata.forEach(item=>{
        scaleData.push({ 'name': item.cropName, 'value': item.area });
      })
        let rich = {
        white: {
            color: '#ddd',
            align: 'center',
            padding: [5, 0]
        }
        };
        let placeHolderStyle = {
        normal: {
            label: {
                show: false
            },
            labelLine: {
                show: false
            },
            color: 'rgba(0, 0, 0, 0)',
            borderColor: 'rgba(0, 0, 0, 0)',
            borderWidth: 0
        }
        };
        let data = [];
        for (let i = 0; i < scaleData.length; i++) {
        data.push({
            value: scaleData[i].value,
            name: scaleData[i].name,
            itemStyle: {
                normal: {
                    borderWidth: 5,
                    shadowBlur: 30,
                    borderColor: new this.$echarts.graphic.LinearGradient(0, 0, 1, 1, [{
                        offset: 0,
                        color: '#7777eb'
                    }, {
                        offset: 1,
                        // color: '#70ffac'
                        color: '#b6b364'
                    }]),
                    shadowColor: 'rgba(142, 152, 241, 0.6)'
                }
            }
        }, {
            value: 4,
            name: '',
            itemStyle: placeHolderStyle
        });
        }
        let seriesObj = [{
        name: '',
        type: 'pie',
        clockWise: false,
        radius: [95, 100],
        hoverAnimation: false,
        itemStyle: {
            normal: {
                label: {
                    show: true,
                    position: 'outside',
                    color: '#ddd',
                    formatter: function(params) {
                        let percent = 0;
                        let total = 0;
                        for (let i = 0; i < scaleData.length; i++) {
                            total += scaleData[i].value;
                        }
                        percent = ((params.value / total) * 100).toFixed(0);
                        if(params.name !== '') {
                            return params.name + '\n{white|' + '占比' + percent + '%}';
                        }else {
                            return '';
                        }
                    },
                    rich: rich
                },
                labelLine: {
                    show: false
                }
            }
        },
        data: data
        }];
        let option = {
        // backgroundColor: '#04243E',
        tooltip: {
            show: false
        },
        legend: {
            show: false
        },
        toolbox: {
            show: false
        },
        series: seriesObj
        }*/


      var img = '';

      /*let trafficWay = [{
        name: '火车',
        value: 20
      },{
        name: '飞机',
        value: 10
      },{
        name: '客车',
        value: 30
      },{
        name: '轮渡',
        value: 40
      }];*/
      this.$watch('fzwdata', res => {
        this.fzwdata = res;
        let trafficWay = [];
        this.fzwdata.forEach(item => {
          trafficWay.push({'name': item.cropName, 'value': item.area});
        })

        let data = [];
        let color = ['#00ffff', '#77f556', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
        for (let i = 0; i < trafficWay.length; i++) {
          data.push({
            value: trafficWay[i].value,
            name: trafficWay[i].name,
            itemStyle: {
              normal: {
                borderWidth: 5,
                shadowBlur: 20,
                borderColor: color[i],
                shadowColor: color[i]
              }
            }
          }, {
            value: 2,
            name: '',
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                color: 'rgba(0, 0, 0, 0)',
                borderColor: 'rgba(0, 0, 0, 0)',
                borderWidth: 0
              }
            }
          });
        }
        let seriesOption = [{
          name: '',
          type: 'pie',
          clockWise: false,
          radius: [75, 79],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: 'outside',
                color: '#ddd',
                formatter: function (params) {
                  let percent = 0;
                  let total = 0;
                  for (let i = 0; i < trafficWay.length; i++) {
                    total += trafficWay[i].value;
                  }
                  percent = ((params.value / total) * 100).toFixed(2);
                  if (params.name !== '') {
                    // return params.name + '\n' + '\n' + '占百分比：' + percent + '%';
                    return params.name + '\n' + '\n' + params.value + '亩 （' + percent + '%）';
                  } else {
                    return '';
                  }
                },
              },
              labelLine: {
                length: 13,
                length2: 13,
                show: true,
                color: '#00ffff'
              }
            }
          },
          data: data
        }];
        let option = {
          color: color,
          title: {
            text: '附着物',
            top: '46%',
            textAlign: "center",
            left: "49%",
            textStyle: {
              color: '#fff',
              fontSize: 18,
              fontWeight: '500'
            }
          },
          graphic: {
            elements: [{
              type: "image",
              z: 3,
              style: {
                image: img,
                width: 125,
                height: 125
              },
              left: 'center',
              top: 'center',
              position: [100, 100]
            }]
          },
          /*tooltip: {
            show: false
          },*/
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            },
            padding: [5, 10]
          },
          /* legend: {
             icon: "circle",
             orient: 'horizontal',
             // x: 'left',
             data:['火车','飞机','客车','轮渡'],
             right: 340,
             bottom: 150,
             align: 'right',
             textStyle: {
               color: "#fff"
             },
             itemGap: 20
           },*/
          toolbox: {
            show: false
          },
          series: seriesOption
        }
        pie1.setOption(option);
        window.addEventListener("resize", function () {
          pie1.resize();
        });
      });






      let trafficWay = [];
      this.fzwdata.forEach(item => {
        trafficWay.push({'name': item.cropName, 'value': item.area});
      })

      let data = [];
      let color = ['#00ffff', '#77f556', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
      for (let i = 0; i < trafficWay.length; i++) {
        data.push({
          value: trafficWay[i].value,
          name: trafficWay[i].name,
          itemStyle: {
            normal: {
              borderWidth: 5,
              shadowBlur: 20,
              borderColor: color[i],
              shadowColor: color[i]
            }
          }
        }, {
          value: 2,
          name: '',
          itemStyle: {
            normal: {
              label: {
                show: false
              },
              labelLine: {
                show: false
              },
              color: 'rgba(0, 0, 0, 0)',
              borderColor: 'rgba(0, 0, 0, 0)',
              borderWidth: 0
            }
          }
        });
      }
      let seriesOption = [{
        name: '',
        type: 'pie',
        clockWise: false,
        radius: [65, 69],
        hoverAnimation: false,
        itemStyle: {
          normal: {
            label: {
              show: true,
              position: 'outside',
              color: '#ddd',
              formatter: function (params) {
                let percent = 0;
                let total = 0;
                for (let i = 0; i < trafficWay.length; i++) {
                  total += trafficWay[i].value;
                }
                percent = ((params.value / total) * 100).toFixed(2);
                if (params.name !== '') {
                  // return params.name + '\n' + '\n' + '占百分比：' + percent + '%';
                  return params.name + '\n\n' + params.value + '亩（' + percent + '%）';
                } else {
                  return '';
                }
              },
            },
            labelLine: {
              length: 13,
              length2: 13,
              show: true,
              color: '#00ffff'
            }
          }
        },
        data: data
      }];
      let option = {
        color: color,
        title: {
          text: '附着物',
          top: '46%',
          textAlign: "center",
          left: "49%",
          textStyle: {
            color: '#fff',
            fontSize: 18,
            fontWeight: '500'
          }
        },
        grid: {
          top: 50,
         /* left: '2%',
          right: '2%',
          bottom: '3%',*/
          // containLabel: true
        },
        graphic: {
          elements: [{
            type: "image",
            z: 3,
            style: {
              image: img,
              width: 95,
              height: 95
            },
            left: 'center',
            top: 'center',
            position: [100, 100]
          }]
        },
        /*tooltip: {
          show: false
        },*/
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          padding: [5, 10]
        },
        /* legend: {
           icon: "circle",
           orient: 'horizontal',
           // x: 'left',
           data:['火车','飞机','客车','轮渡'],
           right: 340,
           bottom: 150,
           align: 'right',
           textStyle: {
             color: "#fff"
           },
           itemGap: 20
         },*/
        toolbox: {
          show: false
        },
        series: seriesOption
      }
      pie1.setOption(option);
      window.addEventListener("resize", function () {
        pie1.resize();
      });
    }
  }
}
</script>

<style lang="scss" scoped>
#pie-container {
  padding: 0.2rem;
  min-width: 2.5rem;
  border-radius: 0.0625rem;

  .text {
    color: #c3cbde;
    font-size: 0.2rem;
  }

  .pie1 {
    padding: 10px 10px;
    /* width: 80%; */
    width: 100%;
    //height: 3.75rem;
    height: 4.55rem;
    z-index: 9;
  }
}
</style>
